<template>
  <div class="app-container">
    <!--查询-->
    <div class="my-bar">
      <el-button-group class="float-left">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onEdit()">新增</el-button>
      </el-button-group>
      <el-form :inline="true" class="float-right" size="small">
        <el-form-item v-if="isAdmin">
          <el-input v-model="getData.params.id" placeholder="请输入ID" clearable />
        </el-form-item>
        <!--自动生成搜索代码开始-->
        <el-form-item>
          <el-input v-model="getData.params.phone$Lk" placeholder="请输入手机" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="getData.params.name$Lk" placeholder="请输入真名" clearable />
        </el-form-item>
        <!--自动生成搜索代码结束-->
        <el-form-item>
          <el-button type="primary" @click="getListData()"><i class="el-icon-search" /></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--展示表格-->
    <el-table v-loading="listData.loading" :data="listData.data" element-loading-text="载入中..." border fit highlight-current-row>
      <el-table-column :show-overflow-tooltip="true" align="center" prop="id" label="自增ID" width="70" />
      <el-table-column align="center" prop="phone" label="手机" />
      <el-table-column align="center" prop="password" label="密码" />
      <el-table-column align="center" prop="name" label="真名" />
      <el-table-column align="center" prop="avatar" label="头像">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" class="avatar" style="width: 80px; height: 80px">
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="status" label="状态" width="70">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" size="mini">正常</el-tag>
          <el-tag v-if="scope.row.status == 0" size="mini">删除</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="status" label="角色">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" size="mini">正常</el-tag>
          <el-tag v-if="scope.row.status == 0" size="mini">删除</el-tag>
          <el-tag v-for="item in scope.row.adminRoleList" :key="item.id" size="mini">{{ item.role ? item.role.name : '' }}</el-tag>
        </template>
      </el-table-column>
      <!--自动生成表格代码结束-->
      <el-table-column align="center" fixed="right" label="操作" width="262px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="onRole(scope.row)">角色设置</el-button>
          <el-button :disabled="loadings[scope.$index]" size="mini" type="primary" @click="onEdit(scope)">编辑</el-button>
          <el-dropdown size="small">
            <el-button :loading="loadings[scope.$index]" size="mini" type="primary">更多 <i class="el-icon-arrow-down" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="onCommand(scope, '删除')">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="my-bar">
      <el-pagination :page-size="getData.pageSize" :total="listData.total" class="float-right" layout="total, prev, pager, next" @current-change="onPageNum" />
    </div>
    <!--新增和编辑-->
    <el-dialog :visible.sync="userRolePop.show" title="用户角色配置" size="small">
      <el-form label-width="10px">
        <el-form-item>
          <my-checkbox v-model="roleList" column="name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userRolePop.show = false; userRolePop.loading = false">取消</el-button>
        <el-button :loading="userRolePop.loading" type="primary" @click="doRole">确定</el-button>
      </div>
    </el-dialog>
    <!--新增和编辑-->
    <el-dialog :title="popData.title" :visible.sync="popData.show">
      <el-form ref="formData" :model="formData" :rules="formRules" label-width="80px" size="small">
        <!--自动生成编辑代码开始-->
        <el-form-item label="手机" prop="phone" required>
          <el-input v-model="formData.phone" placeholder="请输入手机" maxlength="16" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input v-model="formData.password" placeholder="请输入密码" maxlength="32" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="真名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入真名" maxlength="16" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <upload-one v-model="formData.avatar" :type="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="popData.show = false; popData.loading = false">取消</el-button>
        <el-button :loading="popData.loading" size="small" type="primary" @click="saveEvts()">{{ popData.button }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api, { isAdmin } from '@/api/service'
import myCheckbox from '@/views/compts/checkbox'
import uploadOne from '@/views/compts/upload'

export default {
  components: {
    uploadOne,
    myCheckbox
  },
  data() {
    return {
      func: api,
      bean: 'role.admin',
      isAdmin: isAdmin(),
      popData: { show: false },
      getData: {
        pageNum: 1,
        pageSize: 10,
        showFlags: 'adminRoleList,adminRoleList.role',
        params: {
        }
      },
      listData: {
        data: [],
        total: 0,
        loading: false
      },
      userRolePop: {
        loading: false,
        show: false,
        data: []
      },
      formRules: {
        phone: [
          { required: true, message: '请输入手机', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] }
        ]
      },
      formData: {},
      editForm: {
      },
      loadings: [],
      roleList: []
    }
  },
  created() {
    this.getRoleList()
    this.getListData()
  },
  methods: {
    getListData() {
      this.listData.loading = true
      api.getListPage('role.admin', this.getData).then(res => {
        this.listData.data = res.data
        this.listData.total = res.total
        this.listData.loading = false
        this.loadings = []
      })
    },
    getRoleList() {
      this.listData.loading = true
      api.getListPage('role.role', { pageSize: 300, params: {}}).then(res => {
        this.roleList = res.data
        this.listData.loading = false
      })
    },
    onCommand(scope, command) {
      console.log(command, scope)
      if (command === '删除') {
        api.cmStatus(this, scope, 0, command)
      }
    },
    onEdit(scope) {
      api.onEdit(this.$data, scope)
      if (!this.formData.adminRoleList) {
        // this.formData.adminRoleList = [{}]
      }
    },
    saveEvts() {
      api.saveEvts(this)
    },
    onPageNum(val) {
      this.getData.pageNum = val
      this.getListData()
    },
    onRole(row) {
      const list = JSON.parse(JSON.stringify(this.roleList))
      this.userRolePop.show = true
      this.userRolePop.loadings = false
      list.forEach(v => {
        v['checked'] = false
        if (row.adminRoleList) {
          row.adminRoleList.forEach(elem => {
            if (v.id === elem.roleId) {
              v['checked'] = true
            }
          })
        }
      })
      this.roleList = list
      this.userRolePop.data = row
    },
    isInRole(roleId, roleList) {
      for (const role of roleList) {
        if (role.checked && roleId === role.id) {
          return true
        }
      }
      return false
    },
    getUserRole(roleId, adminRoleList) {
      if (adminRoleList) {
        for (const userRole of adminRoleList) {
          if (userRole.roleId === roleId) {
            return userRole
          }
        }
      }
      return null
    },
    doRole() {
      const adminRoleList = []
      if (this.userRolePop.data && this.userRolePop.data.adminRoleList) {
        for (const userRole of this.userRolePop.data.adminRoleList) {
          if (!this.isInRole(userRole.roleId, this.roleList)) {
            adminRoleList.push({
              id: userRole.id,
              status: 0
            })
          }
        }
      }
      for (const role of this.roleList) {
        if (role.checked) {
          const userRole = this.getUserRole(role.id, this.userRolePop.data.adminRoleList)
          adminRoleList.push({
            id: userRole && userRole.id ? userRole.id : null,
            adminId: this.userRolePop.data.id,
            roleId: role.id
          })
        }
      }
      var that = this
      that.userRolePop.loading = true
      console.log('adminRoleList', JSON.stringify(adminRoleList))
      api.saveBatch('role.adminRole', adminRoleList).then(res => {
        api.success(this, '保存').then(() => {
          that.userRolePop.show = false
          that.userRolePop.loading = false
          that.getListData()
        })
      })
    }
  }
}
</script>
